<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div>
    <table id="table1" bordered>
      <tr v-for="row in tableData" :key="row.id">
        <td v-for="item in row" :key="item.id" draggable="true" @dragstart="dragStart(item)" @dragend="dragEnd">
          {{ item.text }}
        </td>
      </tr>
    </table>
 
    <table id="table2" style="height:100px;width:100%;">
      <tr>
        <td
          v-for="item in dragOverData"
          :key="item.id"
          @dragover.prevent="dragOver"
          @drop="dragDrop(item)"
        >
          {{ item.text }}
        </td>
      </tr>
    </table>
  </div>
</template>
 
<script setup>

    const tableData = ref([
      [{ id: 1, text: 'A1' }, { id: 2, text: 'A2' },{ id: 3, text: 'B1' }, { id: 4, text: 'B2' }]
    ]);
    const dragOverData = ref([{ id: 1, text: '' }, { id: 2, text: '' }]);
    let draggedItem = ref(null);
 
    const dragStart = (item) => {
        console.log(item)
      draggedItem.value = item;
    };
 
    const dragEnd = () => {
        console.log('dragEnd')
      draggedItem.value = null;
    };
 
    const dragOver = (event) => {
        // console.log('dragOver')
        // console.log(event)
      event.preventDefault();
    //   const overItem = getItemFromEvent(event);
    //   if (overItem && draggedItem !== overItem) {
    //     const draggedIndex = tableData.value.flat().indexOf(draggedItem);
    //     const overIndex = tableData.value.flat().indexOf(overItem);
    //     tableData.value.flat().splice(draggedIndex, 1);
    //     tableData.value.flat().splice(overIndex, 0, draggedItem);
    //   }
    };
 
    const dragDrop = (item) => {
        console.log('dragDrop')
        console.log(item)
        console.log(draggedItem.value)
      dragOverData.value.forEach(el=>{
        if(el.id === item.id){
            el.text = draggedItem.value.text;
        }
      })
      console.log(dragOverData.value);
    //   tableData.value = [];
    //   dropZone.innerHTML = ''; // Clear table2 to simplify the example
    };
 
    // const getItemFromEvent = (event) => {
    //   const { clientX, clientY } = event;
    //   const target = document.elementFromPoint(clientX, clientY);
    //   return target.closest('td')?.__vue__?.data;
    // };
</script>
 
<style>
td {
  border: 1px solid #ccc;
  padding: 10px;
  cursor: move;
}
</style>

